<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

</head>
<body  ontouchstart="">

    <div class="detailTop pf w100 of">
         <div class="w100 of tc c3 f18">
             <span class="pa" style="left: 10px;font-size: 30px;color: #444444;" onclick="javascript:history.back();">&laquo;</span>
             个人资料
         </div>
    </div>
    <div class="container jz" style="margin-top: 41px;">
        <section class="personalAllInfo w100 bcf of">
            <a href="personalData.html" class="db clearfix of">
                <img src="images/touxiang.png" class="db fl">
                <button type="button" class="ghtouxiang db tc f16 c6 fl" id="ghtouxiang" onclick="return false;">点击更换头像</button>
                <!--<input  type="button" name="" value="点击更换头像" class="ghtouxiang db tc f16 c6 fl" id="ghtouxiang" onclick="return false;";/>-->
            </a>
        </section>
        <script>
            $(function () {
                $("#ghtouxiang").bind("click",function () {
                    $(".theme-popover-mask").fadeIn();
                    $("#photoclip").fadeIn();
                })
            })
        </script>
        <section class="personalAllMoney w100 bcf of">
            <a href="#" class="db of">
                <div class="personalAllMoneyTittle of">
                    <div class="fl">
                        <span class="c9 f12">余额</span><span class="c3 f20 mgl7">166,000.</span><span class="c3 f16">00</span>
                    </div>
                </div>
                <div class="personalAllMoneyContent of">
                   <div class="of clearfix">
                        <div class="fl pr">
                            <img src="images/benjin.png" class="db fl">
                            <div class="fl">
                                <p class="f14 c9">本金</p>
                                <p><span class="f20 cffcc33">80,000.</span><span class="f16 cffcc33">00</span></p>
                            </div>
                            <div class="pa" style="height: 72%;width: 1px;background: #EBEBEB;right: -0.5px;top: 14%;">

                            </div>
                        </div>
                       <div class="fr">
                            <img src="images/xinyongjin.png" class="db fl" style="height: 20px;">
                            <div class="fl">
                                <p class="f14 c9">信用金</p>
                                <p><span class="f20 cffcc33">80,000.</span><span class="f14 cffcc33">00</span></p>
                            </div>
                        </div>
                   </div>
                    <div class="of clearfix" style="border-bottom:none;">
                        <div class="fl pr">
                            <img src="images/kequ.png" class="db fl">
                            <div class="fl">
                                <p class="f14 c9">可取</p>
                                <p><span class="f20 cffcc33">80,000.</span><span class="f16 cffcc33">00</span></p>
                            </div>
                            <div class="pa" style="height: 72%;width: 1px;background: #EBEBEB;right: -0.5px;top: 14%;">

                            </div>
                        </div>
                        <div class="fr">
                            <img src="images/yinkui.png" class="db fl" style="height: 25px;">
                            <div class="fl">
                                <p class="f14 c9">盈亏</p>
                                <p><span class="f20 cffcc33">0.</span><span class="f14 cffcc33">00</span></p>
                            </div>
                        </div>
                    </div>

                </div>
            </a>
        </section>
        <section  class="personalAllMoney w100 bcf of">
            <div class="personalDataContent of w100">
                <a class="of clearfix db">
                    <div class="fl pr">
                        <span class=" f14 c3 mgl10" style="line-height: 34px;">
                            昵称
                        </span>

                    </div>
                    <div class="fr" style="width: 20%;margin-left: 3%">
                        <button type="button" id="modifyNameBtn" class="modifyBtn f14 cf db w100">修改</button>
                    </div>
                    <div class="fr" style="width: 43%">
                        <input type="text" name="" placeholder="桂林张三疯" class="f14 personalInput fr db tr w100" disabled="disabled"/>
                    </div>
                </a>
                <a class="of clearfix db"  style="border-bottom:none;">
                    <div class="fl pr">
                        <span class=" f14 c3 mgl10" style="line-height: 34px;">
                            手机号码
                        </span>

                    </div>
                    <div class="fr" style="width: 20%;margin-left: 3%">
                        <button type="button" id="modifyMoblieBtn" class="modifyBtn f14 cf db w100">修改</button>
                    </div>
                    <div class="fr" style="width: 43%">
                        <input type="text" name="" placeholder="13923456789" class="f14 personalInput fr db tr w100" disabled="disabled"/>
                    </div>
                </a>

            </div>
        </section>
        <section class="w100 of">
            <button type="button" class="exitButton f18 cf tc db jz">退出登陆</button>
        </section>
    </div><!--container-->
    <div class="theme-popover-mask"></div>
    <section id="photoclip" class="photoclip pa of bcf">
        <div class="detailTop w100 of">
            <div class="w100 of tc c3 f18">
                更换头像
            </div>
        </div>
        <div class="container jz w100 of">
            <div class="w100 of jz">
                <section id="touxiangClip" class="touxiangClip w100 bcf of">
                    <div id="clipArea"></div>
                    <div class="w100 of clearfix" style="width: 80%;margin: 9px auto;">
                        <button type="button" id="fileFake" class="choosePic fl" onclick="choosePic();">选择图片</button>
                        <input type="file" id="file">
                        <button type="button" id="clipBtn" class="choosePic fr" style="background:#ccccff;">截取提交</button>
                    </div>
                    <div id="view"></div>
                    <P class="w100 tc c6 f12 mgt10">截图预览</P>
                    <div class="jz of mgb32 mgt10" style="width: 90%">
                        <button type="button" id="clipOk" class="cf jz db fl" onclick="clipHide();">取消</button>
                        <button type="button" id="clipSub" class="cf jz db fr" onclick="clipHide();">确定</button>
                    </div>
                </section>
                <script src="js/iscroll-zoom.js"></script>
                <script src="js/hammer.js"></script>
                <script src="js/lrz.all.bundle.js"></script>
                <script src="js/jquery.photoClip.js"></script>
                <script>
                    function clipHide() {
                        $(".theme-popover-mask").fadeOut();
                        $("#photoclip").slideUp();
                    }
                    function choosePic() {
                        $("#file").trigger("click");
                    }


                    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                    var clipArea = new bjj.PhotoClip("#clipArea", {
                        size: [150, 150],
                        outputSize: [150, 150],
                        file: "#file",
                        view: "#view",
                        ok: "#clipBtn",
                        loadStart: function() {
                            console.log("照片读取中");
                        },
                        loadComplete: function() {
                            console.log("照片读取完成");
                        },
                        clipFinish: function(dataURL) {
                            console.log(dataURL);
                            saveImageInfo();
                        }
                    });
//                    clipArea.destroy();


                    //图片上传
                    function saveImageInfo() {
                        var filename = $('#view').attr('fileName');
                        var img_data = $('#view').attr('src');
                        if(img_data==""){alert('null');}
                        $.post("这里填写图片获取的网址", {image: img_data}, function (data) {
                            if (data != '') {
                                //console.info(data);
                                //data 为返回文件名；
                                alert('提交成功');
                                clipHide();
                            }
                        });
                    }

                </script>
                <style>
                    #clipArea {
                        margin: 3% 8%;
                        height: 200px;
                    }
                    #file{
                        display: none;
                    }
                    #view {
                        margin: 0 auto;
                        width: 110px;
                        height: 110px;
                    }
                    #clipOk,#clipSub{
                        width: 45%;
                        display: block;
                        height: 40px;
                        line-height:40px;
                        border-radius: 3px;
                    }
                    #clipOk{
                        background:#ccc;
                    }
                    #clipSub{
                        background:#0066ff;
                    }
                </style>
            </div>
        </div>
    </section>
    <!--changePicDiv-->
    <section id="modifyMoblieIframeDiv" class="loginIframeDiv w100 h100 pf">
        <div class="registIframe jz bcf" style="height: 459px;margin-top: 17%">
            <iframe class="w100 h100 of" src="modifyMoblie.html" frameborder="0" scrolling="no"  vsspace="0" hspace="0" marginwidth="0" marginheight="0">

            </iframe>
        </div>
    </section>
    <!--modifyMoblieIframeDiv-->
    <section id="modifyNameIframeDiv" class="loginIframeDiv w100 h100 pf">
        <div class="registIframe jz bcf"  style="height: 358px;margin-top: 27%">
            <iframe class="w100 h100 of" src="modifyName.html" frameborder="0" scrolling="no"  vsspace="0" hspace="0" marginwidth="0" marginheight="0">

            </iframe>
        </div>
    </section>
    <!--modifyMoblieIframeDiv-->
</body>
</html>
